<x-row>
  <x-col span="12">
    <x-color-picker [(ngModel)]="model1"></x-color-picker>
  </x-col>
</x-row>
<x-row>
  <x-col span="12">
    <span>{{ 'HEX:' + model2 }}</span>
    <x-color-picker [(ngModel)]="model2"></x-color-picker>
  </x-col>
</x-row>
<x-row>
  <x-col span="12">
    <span>{{ 'RGBA:' + model3 }}</span>
    <x-color-picker [(ngModel)]="model3"></x-color-picker>
  </x-col>
</x-row>
<x-row>
  <x-col span="12">
    <span>{{ 'HSLA:' + model4 }}</span>
    <x-color-picker [(ngModel)]="model4"></x-color-picker>
  </x-col>
</x-row>
